<template>
  <div>
    <div
      class="top"
      style="margin-top: 23px; padding-bottom: 20px"
    >
      <p style="margin-bottom: 25px">
        <span style="font-size: 22px; font-weight: 550; margin-right: 150px">{{
          data[0].positionName
        }}</span>
        <span style="font-size: 24px; color: red; font-weight: 550">{{
          data[0].salary
        }}</span>
      </p>
      <p style="font-size: 16px">
        {{ data[0].baseInfo0 }}| {{ data[0].baseInfo1 }}|
        {{ data[0].baseInfo2 }}
      </p>
      <div>
        <a-tag
          color="green"
          style="
            width: 80px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            padding-top: 4px;
            margin-right: 20px;
          "
        >
          企业服务
        </a-tag>
        <a-tag
          color="cyan"
          style="
            width: 80px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            padding-top: 4px;
            margin-right: 20px;
          "
        >
          需求分析
        </a-tag>
        <a-tag
          color="blue"
          style="
            width: 80px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            padding-top: 4px;
            margin-right: 20px;
          "
        >
          广告营销
        </a-tag>
      </div>
      
    </div>
    <div class="content">
        <h2>职业描述</h2>
        <h3>职位职责: </h3>
        <p>1、负责基于场景的用户增长;</p>
        <p>2、跟进项目，确保最终实现与需求-―致;</p>
        <p>3、分析产品数据，并根据数据对产品进行迭代;</p>
        <p>4、与相关部门配合，实现业务增长。</p>
        <h3>职位要求:</h3>
        <p>1、有2年以上用户端产品相关经验;</p>
        <p>2、对数据敏感，相信数据驱动业务;</p>
        <p>3、优秀的洞察力和同理心，善于设身处地地理解各类人的处境，通过用户访谈、场景分析等手段发现潜在用户需求;</p>
        <p>4、有非常强的逻辑分析能力，思维敏捷，有非常好的沟通能力。</p>
      </div>
      <div class="complain">
          <h2>公司地址</h2>
          {{ data[0].companyAddress0 }}
    {{ data[0].companyAddress1 }}
    {{ data[0].companyAddress2 }}
    {{ data[0].companyAddress3 }}
    {{ data[0].companyAddress4 }}
      </div>
    
  </div>
</template>

<script>
const data = [];
export default {
  data() {
    return {
      data,
    };
  },
  mounted() {
    function getData(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("post", url);
        xhr.setRequestHeader("content-type", "application/JSON");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(xhr.responseText);
            }
          } else {
            console.log(reject);
          }
        };
      });
    }
    //async与await是组合搭配，只要一个没存在就会报错//无法把里面的数据拿到外部,会自动获取结果,省去了之后的then请求结果
    async function action() {
      const dataInfo = await getData("/getcompanyinfo"); //使用这个方法更便捷，省去了之后的then请求结果，原本是then去执行这个请求，await等待结果,await===.then(cb){}
      const dataDel = await JSON.parse(dataInfo).data[0];
      console.log(dataDel);
      data.push({
        key: "1",
        companName: dataDel.userAllInfo.companyDetail.companName,
        industry: dataDel.userAllInfo.companyDetail.industry,
        address: dataDel.userAllInfo.companyDetail.address,
        count: dataDel.userAllInfo.companyDetail.count,
        recentLoginTime: dataDel.userAllInfo.companyDetail.recentLoginTime,
        registerTime: dataDel.userAllInfo.companyDetail.registerTime,
        position: dataDel.userAllInfo.companyDetail.position,
        postPublisher: dataDel.userAllInfo.companyDetail.postPublisher,
        hirings: dataDel.userAllInfo.companyDetail.hirings,
        positionName: dataDel.userAllInfo.position.positionName,
        salary: dataDel.userAllInfo.position.salary,
        baseInfo0: dataDel.userAllInfo.position.baseInfo[0],
        baseInfo1: dataDel.userAllInfo.position.baseInfo[1],
        baseInfo2: dataDel.userAllInfo.position.baseInfo[2],
        companyAddress0: dataDel.userAllInfo.position.companyAddress[0],
        companyAddress1: dataDel.userAllInfo.position.companyAddress[1],
        companyAddress2: dataDel.userAllInfo.position.companyAddress[2],
        companyAddress3: dataDel.userAllInfo.position.companyAddress[3],
        companyAddress4: dataDel.userAllInfo.position.companyAddress[4],
      });
      console.log(data[0].hirings);
      return dataDel;
    }
    action();
  },
};
</script>

<style>
.top {
  background-color: #f0efef;
}
</style>